<template>
  <div class="deptAssetsHome">
    <header-btn  :btnList='record_list_data' :tabIndex='tabIndex' @changetabIndex='tabIndexChange'>
      <el-select class="select" @change='getTable' size='medium'  v-model="dept" placeholder="请选择" style="margin:17px 6px 0 0;" v-show="allMyDept&&allMyDept.length>1">
        <el-option   v-for="item in allMyDept"  :key="item.dept_id"  :label="item.department_name" :value="item.dept_id"></el-option>
      </el-select>
    </header-btn>
    <!-- 记录列表 -->
    <div class="deptAssetsContent" v-if="[0,6].indexOf(tabIndex)==-1">
        <HeadSearchBox />
        <div class="table-vue">
            <lpj-table-vue :baseNum='paginationMes.per_page*(paginationMes.current_page-1)' @linkBtnFn='linkBtnFn' :tableHeaderData="tableHeaderData[tabIndex-1]" :tableData="tableData"></lpj-table-vue>
        </div>
        <pagination align="right" v-if="paginationMes.total&&paginationMes.total>10"  :paginationMes="paginationMes" @sizeChangeFn="sizeChangeFn" @currentChangeFn="currentChangeFn"></pagination>
    </div>
    <!-- 资产列表 -->
    <el-row v-if="tabIndex==0" class="deptAssetsContent">
      <div class="assets_list"   v-for="(item,index) in assetsDataList" :key="index">
        <div class="assets_list_card"  @click="goAssetsDetails(item)">
          <div class="assets_img" ref="assets_img" :style="{height:assets_img_height+'px'}">
            <el-image style="width: 180px; height: 187px" :src="item.image_url||require('./../../../assets/images/assets-no.png')" fit="cover"></el-image>
          </div>
          <div class="assetbox">
            <div class="assets_name">{{item.f_name}}</div>
            <div class="assets_id">资产编号：{{item.f_code}}</div>
            <div class="assets_id">领用时间：{{item.create_time}}</div>
            <div class="operation_btn" >
              <el-button type="primary" plain v-for="(opt,i) in operation_list" :class="{redClass:item.re_other_status-1==i}" :disabled="item.re_other_status!=0" :key="i" @click.stop="assetsOperation(opt,item)"> {{opt}}</el-button>
            </div>
          </div> 
        </div>
      </div>
      <el-col class="deptAssetsContent_noData" :span="24" v-if="deptAssetsContent_noData_OnOff">
        <div class="deptAssetsContent_noData_text">您还没有个人资产哦~</div>
      </el-col>
    </el-row>
    <!-- 报表 -->
    <report-form ref="reportForm" :dept='dept'  v-if="tabIndex==6"></report-form>
    <!-- 弹窗 -->
    <dialog-vue :noTurnMe='true' :wh_id='wh_id' :dialogTitle="dialogTitle" :dialogVisible="dialogVisible" @dialogVisibleChangeFn="dialogVisibleChangeFn" :ruleForm="ruleForm"  @goCancel="goCancel"
    @goSubmit="goSubmit">
    </dialog-vue>
  </div>
</template>
<script>
/* eslint-disable */
/*******获取部门资产列表       报修               转移                退还                报失                 删除报修信息 撤销报修信息  编辑报修信息 撤销转移       确认转移         撤销退还     删除退还记录   撤销报失   删除报失*/
import {getDeptAssetListApiFn,repairsAssetsApiFn,transferAssetsApiFn,sendBackAssetsApiFn,disposeAssetsApiFn,removeRepair,revokeRepair,editRepair,revokeTransfer,confirmTransfer,revokeReturn,removeReturn,revokeLoss,removeLoss,
/**领取记录            转移记录                报修记录               退还记录                报失记录 */
getDeptReceiveRecord, getDeptTransferRecord , getDeptRepairsRecord , getDeptSendBackRecord ,getDeptMyLossRecord} from "./api"
        /** 获取用户部门     获取全部部门          根据部门id获取用户     */
// import { getDepartmentsApi,getAllDepartmentsApi,getUserByDepartIdApi } from "@/api"
import DialogVue from "@/components/DialogVue"
import Pagination from "@/components/Pagination"
import LpjTableVue from "@/components/LpjTableVue"
import headerBtn from "@/components/headerBtn"
import constObj from '@/config/const' /**表头常数 */
import reportForm from "./components/reportForm"
import HeadSearchBox from '@/components/HeadSearchBox' /*头部搜索*/
export default {
  name: "deptAssets",
  components:{ DialogVue, Pagination, LpjTableVue,headerBtn,reportForm,HeadSearchBox  },
  data() {
    return {
      dept:'',/**部门 */
      allMyDept:[],/*我的全部部门 */
      /**头部记录信息 */
      record_list_data:[
         {num:'',content:'部门资产'},
		 {num:'',content:'领用记录'},
		 {num:'',content:'报修记录'},
		 {num:'',content:'转移记录'},
		 {num:'',content:'退还记录'},
		 {num:'',content:'报失记录'},
		 {num:'',content:'部门资产报表'}
	  ],
      tabIndex:0,
      tableHeaderData:constObj.tableHeaderOfmyAsset,
      tableData:[],/*table里的数据 */
      paginationMes:{per_page:10,current_page:1,totol:0}, /*分页 数据*/
      assetsDataList:[{}], /**资产数据 */
      operation_list:['报修','转移','退还','报失'],/**操作选项 */
      assets_img_height:187, /**资产图片高度 */
      assets_img_height_once:true, /**资产图片高度第一次渲染 */
      dialogTitle: '',/*领用弹框头部*/
      dialogVisible: false,/*是否显示领用弹框*/
      deptAssetsContent_noData_OnOff:false, /**控制没有资产时显示内容 */
      dialogTitle: '',/*领用弹框头部*/
      dialogVisible: false,/*是否显示领用弹框*/
      wh_id:'',
      ruleForm: {
          formList: [],
          addForm:[]
      },/*领用表单*/
    };
  },
  created() {
    this.allMyDept = this.$store.state.users.department||[]
    this.dept = this.allMyDept[0].dept_id
    this.tabIndex = Number(localStorage.curTabIndex) 
    this.tabIndex==6?'':this.getTable()
  },
    methods: {
    /**切换tabIndex */
    tabIndexChange(index){
      this.tabIndex = index
      localStorage.curTabIndex = index
      this.paginationMes={per_page:10,current_page:1,totol:0}, /*分页 数据*/
      this.tabIndex==6?'':this.getTable()
    },
    /**获取table数据 */
    getTable(){
      let promise
      let params = {page:this.paginationMes.current_page,num:this.paginationMes.per_page,dept_id:this.dept}
      switch(this.tabIndex){
        case 0: this.getDataFn();break; //领用
        case 1: promise=getDeptReceiveRecord(params);break; //领用
        case 2: promise=getDeptRepairsRecord(params);break;//保修
        case 3: promise=getDeptTransferRecord(params);break;//转移
        case 4: promise=getDeptSendBackRecord(params);break;//退还
        case 5: promise=getDeptMyLossRecord(params);break;//报失
        case 6: this.$refs.reportForm.getData(this.dept);break;//报表
      } 
      promise?promise.then(res=>{
        this.tableData = res.data
        this.paginationMes={per_page:Number(res.per_page),total: res.total,current_page:Number(res.current_page)}
      }):''
    },
    /**改变页码 */
    currentChangeFn(val){
      this.paginationMes.current_page = val 
      this.getTable()
    },
    /**改变每页条数 */
    sizeChangeFn(val){
      this.paginationMes.current_page = 1
      this.paginationMes.per_page = val 
      this.getTable()
    },
    /**table操作 */
    linkBtnFn(label,val){
      switch(label+this.tabIndex){
        case '详情2':this.$router.push({name:"requireRepairDetail",query:{key:val.id, param: this.$route.meta.title}});break;
        case '编辑2':this.toLinkEditRepairFn(val);break;/**报修2 */
        case '撤销2':this.toLinkEditFn(val,val.rp_status==4?"删除":'撤销','报修');break; /**删除或撤销报修 */
        case '请您确认3':this.toLinkEditFn(val,label,'转移');break;/**确认转移 */
        case '撤销3':this.toLinkEditFn(val,label,'转移');break; /**撤销转移 */
        case '撤销4':this.toLinkEditFn(val,label,'退还');break; /**撤销退还 */
        case '删除4':this.toLinkEditFn(val,label,'退还');break; /**删除退还 */
        case '撤销5':this.toLinkEditFn(val,label,'报失');break; /**撤销报失 */
        case '删除5':this.toLinkEditFn(val,label,'报失');break; /**删除报失 */
      }
    },
    /**前往详情页 */
    goAssetsDetails(item){
      this.$router.push({name:"assetDetail",query:{id:item.id,name:this.$route.meta.title}})
    },
    /**获取资产数据 */
    getDataFn(){
      getDeptAssetListApiFn({dept_id:this.dept}).then(res=>{
        if(res){
                this.assetsDataList = res
                if(res.length>0){this.myAssetsContent_noData_OnOff = false}
                this.assetsDataList.forEach(item=>{
                  item.status = ['正常','报修中','转移中','退还中','报失中'][item.re_other_status]
                })
            }
      })
    },
    /**点击浮窗的操作按钮 */
    assetsOperation(opt,obj){
        switch (opt) {
            case '转移': this.toLinkTransferFn(obj);break;
            case '报失': this.toLinkScrapFn(obj);break;
            case '报修': this.toLinkRepairFn(obj);break;
            case '退还': this.toLinkReturnFn(obj);break;
            default:break;
        }
    },
    /*报失功能*/
    toLinkScrapFn(val){
            this.ruleForm.formList = [
              { type: 'textarea', name:'lo_reason', label: '报失原因', placeholder: '请输入报失原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入报失原因', trigger: 'blur' }]}
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'lo_a_id',formValue:val.id}
            ]
 
            this.dialogTitle = '资产报失'
            this.dialogVisible = true
    },
    /*转移功能*/
    toLinkTransferFn(val){
            this.wh_id = String(val.wh_id)
            this.ruleForm.formList = [
              { type: 'pick',name:'ts_type', label: '',formValue:1},
              { type: 'textarea', name:'ts_reason', label: '转移原因', placeholder: '请输入转移原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入转移原因', trigger: 'blur' }]},
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'ts_a_id',formValue:val.id},
              // {name:'users',formValue:''},
              // {name:'departments',formValue:''},
            ]
            this.dialogTitle = '资产转移'
            this.dialogVisible = true
    },
    /*报修功能*/
    toLinkRepairFn(val){
            this.ruleForm.formList = [
              { type: 'textarea', name:'rp_reason', label: '报修原因', placeholder: '请输入报修原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入报修原因', trigger: 'blur' }]},
              { type: 'upload',name:'rp_ri_url', label: '图片', limitNum: 6,formValue:[],rules:[{ required: true, message: '请上传报修图片', trigger: 'change',type: 'array', }]}
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'rp_a_id',formValue:val.id}
            ]
            this.dialogTitle = '资产报修'
            this.dialogVisible = true
    },
    toLinkEditFn(val,label,action){
          this.$confirm(`即将${label+action}"${val.f_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              let param = {id:val.id}
              let promise
              switch(label+action){
                case '撤销报修':promise=revokeRepair(param);break;
                case '删除报修':promise=removeRepair(param);break;
                case '请您确认转移':promise=confirmTransfer(param);break;
                case '撤销转移':promise=revokeTransfer(param);break;
                case '撤销退还':promise=revokeReturn(param);break;
                case '删除退还':promise=removeReturn(param);break;
                case '撤销报失':promise=revokeLoss(param);break;
                case '删除报失':promise=removeLoss(param);break;
              }
              promise.then(res=>{
                    this.getTable()
                });
            });
    },
    /**编辑报修功能 */
    toLinkEditRepairFn(val){
            let img = val.image&&val.image.length?val.image.map(item=>{return item.ri_url}):[]
            this.ruleForm.formList = [
              { type: 'textarea', name:'rp_reason', label: '报修原因', placeholder: '请输入报修原因', className: 'two', formValue: val.rp_reason,rules:[{ required: true, message: '请输入报修原因', trigger: 'blur' }]},
              { type: 'upload',name:'rp_ri_url', label: '图片', limitNum: 6,formValue:img,rules:[{ required: true, message: '请上传报修图片', trigger: 'change',type: 'array', }]}
            ]
            this.ruleForm.addForm = [
              {name:'id',formValue:val.id},
            ]
            this.dialogTitle = '编辑资产报修'
            this.dialogVisible = true
    },
    /*退还功能*/
    toLinkReturnFn(val){
           this.ruleForm.formList = [
              { type: 'textarea', name:'ret_reason', label: '退还原因', placeholder: '请输入退还原因', className: 'two', formValue: '',rules:[{ required: true, message: '请输入退还原因', trigger: 'blur' }]},
              { type: 'upload',name:'ret_ri_url', label: '图片', limitNum: 6,formValue:[],rules:[{ required: true, message: '请上传退还图片', trigger: 'change',type: 'array', }]}
            ]
            this.ruleForm.addForm = [
              {name:'re_id',formValue:val.re_id},
              {name:'ret_a_id',formValue:val.id}
            ]

        this.dialogTitle = '资产退还'
        this.dialogVisible = true
    },
    /**控制是否显示弹窗 */
    dialogVisibleChangeFn(val){
        this.dialogVisible = val
        if(!val){
            this.ruleForm.formList=[]
        }
    },
    /**弹窗取消按钮 */
    goCancel(){
      this.dialogTitle = '' 
      this.dialogVisible = false
      this.ruleForm = {formList:[],addForm:[]}
    },
    // /*通过部门树获取部门人员*/
    getDepartmentPeopleFn(param){
        this.ruleForm.formList[param.index].formId=param.id
        this.ruleForm.formList[param.index+1].formValue=""
        getUserByDepartIdApi({depart_id:param.id}).then((res)=>{
            if(res&&res.length){
                this.ruleForm.formList[5].option = res.map(item=>{
                    return {value:item.user_id,name:item.user_name,disabled:item.user_id==this.$store.state.users.userid}
                })
            }else{
              this.ruleForm.formList[5].option=[]
            }
        })
    },
    // /*监听资产领用弹窗点击确定*/
    goSubmit(e,users,departments,dept_id){
        let promise
        switch(this.dialogTitle){
            case "资产报失":
               promise = disposeAssetsApiFn(e); break;
            case "资产转移":let params = e;params.append('users',JSON.stringify(users));params.append('departments',JSON.stringify(departments));;params.append('dept_id',dept_id);
                promise = transferAssetsApiFn(params);break;
            case "资产报修":
                promise = repairsAssetsApiFn(e);break;
            case "资产退还":
                promise = sendBackAssetsApiFn(e);break;
            case "编辑资产报修":
                promise = editRepair(e);break;
        }
        promise.then((res)=>{
            this.goCancel()
            this.$store.commit('changeDisabled', false)
            this.getTable();
        }).catch(err=>{
            this.$store.commit('changeDisabled', false)
        })
    },
  }
};
</script>
<style lang="stylus" scoped>
.deptAssetsHome
  font-family "SourceHanSansCN-Regular"
  height 100%
  font-size 14px
  color #303133 
  .select
    >>>input
     width: 150px;
     height: 30px;
   >>>i
     line-height 30px
  .deptAssetsContent
    margin 10px 0
    background-color #fff
    padding 30px
    .deptAssetsContent_noData
      padding 20px 10px
      .deptAssetsContent_noData_text
        font-size 18px
        line-height 100px
        text-align center
        color #ccc
    .assets_list
      background-color: rgba(247, 247, 251, 1);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0);
      display inline-block
      width 180px
      height: 338px;
      margin 7.5px 15px 7.5px 0
      &:hover .assets_list_card
        cursor pointer
      .assets_list_card
        background-color: rgba(247, 247, 251, 1);
        .operation_item
          width 100% 
          height 36px
          position absolute 
          left 0
          bottom -36px
          transition 0.5s
          background rgba(0, 0, 0, 0.5)
          .operation_item_name
            box-sizing border-box
            float left 
            width 25%
            height 24px
            line-height 24px
            margin-top 6px
            border-right 1px solid rgba(255, 255, 255, 0.28)
            color #fff
          &:hover .operation_item
            bottom 0px
        .assetbox
          padding 10px 12px 20px 12px
          .assets_name
            line-height 20px;
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
            text-align: left;
            margin-bottom 10px
            border-bottom 1px solid rgb(238,238,238)
            padding-bottom 10px
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break break-all
          .assets_id
            float: left
            width 100%
            line-height 24px;
            color: rgba(149, 149, 149, 1);
            font-size: 12px;
            text-align: left;
          .operation_btn
            display flex
            padding 17px 0 4px 0
            >>>span
              font-size 12px
            width 100%
            justify-content space-between
          .redClass
            color: rgba(249, 16, 16, 1);
            border: 1px solid rgba(249, 16, 16, 1); 
</style>
<style lang="stylus">
.deptAssetsHome
  .operation_btn
    .el-button--primary
       width: 33px;
       height: 20px;
       line-height 14px
       text-align center
       padding 2px 2px
       border-radius: 4px;
       background-color: rgba(255, 255, 255, 0);
       text-align: center;
       font-family: Microsoft Yahei;
       color: rgba(10, 142, 255, 1);
       border: 1px solid rgba(10, 142, 255, 1);
</style>